<!-- 
	版本声明：
	* 由于 WanlLive、WanlChat、WanlPay 以下代码开发难度较大，已将相关代码独立申请著作权，受法律保护！！！
	* 无论你购买任何版本，均不允许复制到第三方直接、间接使用，且也不能以学习为目的参考和借鉴！！
	* 你仅有在 WanlShop 中使用、二次开发权利，否则我们会追究法律责任 
	* 深圳前海万联科技有限公司 @www.i36k.com
	* 法律顾问：易法通 @https://www.yifatong.com/
-->
<template>
	<view class="">
		<view class="" :style="{paddingTop:top+'px'}">

		</view>
		<view class="video">
			<view class="empty position-center align-center justify-center"
				v-if="videoList.length === 0 && status !== 'loading'">
				<view>

				</view>
			</view>
			<swiper vertical acceleration :current="videoIndex" :style="{width: width + 'px', height: height + 'px'}"
				@change="changeCurrent" @animationfinish="animationFinish">
				<swiper-item v-for="(item, index) in videoList" :key="index">
					<!-- 视频预渲染 +1 -->
					<block v-if="Math.abs(videoIndex - index) <= 1">
						<!-- <block v-if="videoIndex === index"> -->
						<view @click="handleClicked">
							<!-- 播放界面 -->
							<wanl-find-video ref="wanlVideo" :width="width" :height="height" :src="item.video.url"
								:play="item.play" :videoId="item.id" :coverUrl="item.video.cover_url"
								:objectFit="item.video.fit" :gDuration="item.video.duration"
								:initialTime="item.initialTime" @pause="pauseVideo" />
							<!-- 组件 -->
							<view class="position-bottom-center" :style="{bottom: `${safeBottom}`}">
								<view class="flex-direction justify-between align-end padding-lr-bj padding-bottom-sm">
									<view class="flex-sub padding-right-bj">
										<view v-if="item.shop" class="left-title"
											@click.stop="handleShop(item.shop.id)">
											<text
												class="text-white margin-bottom-s text-lg">@{{item.shop.shopname}}</text>
										</view>
										<view v-if="item.user" class="left-title"
											@click.stop="handleUser(item.user_no)">
											<text
												class="text-white margin-bottom-s text-lg">@{{item.user.nickname}}</text>
										</view>
										<view class="left-describe flex-direction">
											<!-- #ifndef APP-PLUS -->
											<!-- <text class="text-orange text-df" @click.stop="handleTag">#标题测试#</text> -->
											<!-- #endif -->
											<text
												class="text-lines-3 flex-sub text-df text-white-8">{{formatHtml(item.content)}}</text>
										</view>
									</view>
									<view class="main-right align-center">
										<view v-if="item.shop"
											class="main-right-user position-relative margin-bottom-xs align-center">
											<view class="main-right-image justify-center bg-white round align-center"
												@click.stop="handleUser(item.user_no)">
												<image class="main-right-img round"
													:src="oss(item.shop.avatar, 35, 35, 2, 'avatar')" />
											</view>
											<view v-if="item.isFollow === 0"
												class="main-right-user-follow bg-red round position-absolute justify-center align-center"
												@click.stop="handleFollow(item.shop)">
												<text class="text-min icon">&#xe644;</text>
											</view>
											<view v-if="item.isFollow === 1"
												class="main-right-user-follow bg-red round position-absolute justify-center align-center"
												@click.stop="handleFollow(item.shop)">
												<text class="text-min icon text-bold">&#xe66c;</text>
											</view>
										</view>
										<view v-if="item.user"
											class="main-right-user position-relative margin-bottom-xs align-center">
											<view class="main-right-image justify-center bg-white round align-center"
												@click.stop="handleUser(item.user_no)">
												<image class="main-right-img round"
													:src="oss(item.user.avatar, 35, 35, 2, 'avatar')" />
											</view>
											<view v-if="item.isFollow === 0"
												class="main-right-user-follow bg-red round position-absolute justify-center align-center"
												@click.stop="handleFollow()">
												<text class="text-min icon">&#xe644;</text>
											</view>
										</view>
										<view v-if="item.content" class="margin-top align-center"
											@click.stop="handleLike">
											<text :class="{'text-red': item.isLike === 1}"
												class="icon text-xxxxl ">&#xe635;</text>
											<text class="text-white text-min">{{item.likes}}</text>
										</view>
										<view v-if="isComment === 'Y'" class="margin-top align-center"
											@click.stop="handleComment">
											<text class="icon text-xxxxl">&#xe68c;</text>
											<text class="text-white text-min">{{item.comments}}</text>
										</view>
										<view v-if="item.content" class="margin-top align-center"
											@click.stop="handleShare">
											<text class="icon text-xxxxl">&#xe72f;</text>
										</view>
									</view>
								</view>
								<!-- 商品 -->
								<scroll-view class="goods flex-direction" :style="{width: width + 'px'}" scroll-x
									enable-flex="true" :show-scrollbar="false">
									<view class="goods-item" :style="{width: width * 0.8 + 'px'}"
										v-for="(goods, keys) in item.goods" :key="keys">
										<view class="flex-direction">
											<image class="goods-item-img" :src="oss(goods.image, 60, 60)"></image>
											<view class="flex-sub justify-between">
												<view>
													<text
														class="text-sm text-lines-mp text-black-8">{{goods.title}}</text>
												</view>
												<view class="flex-direction justify-between">
													<view class="goods-item-content-details-price">
														<text class="text-df text-orange">￥{{goods.price}}</text>
													</view>
													<view
														class="padding-tb-s wanl-bg-orange radius padding-lr-xs align-center flex-direction"
														@click.stop="handleGoods(goods.id)">
														<text class="icon text-min">&#xe636;</text>
														<text class="text-min text-white margin-left-s">立即购买</text>
													</view>
												</view>
											</view>
										</view>
									</view>
								</scroll-view>
							</view>
						</view>
					</block>
				</swiper-item>
			</swiper>
			<!-- 弹出层 -->
			<uni-popup ref="wanlCommentPopup" type="bottom">
				<view class="comment padding-bj">
					<view class="flex-direction justify-between align-center margin-bottom-bj">
						<text></text>
						<text class="text-white text-30">全部评论（{{commentData.count}}）</text>
						<text class="icon text-30" @tap="handleCommentClose">&#xe66b;</text>
					</view>
					<wanl-comment :embedded="true" :findId="commentData.find_id" :commentList="commentData.list"
						:commenCount="commentData.count" @complete="handleComplete" />
					<view :style="{height: `${bottom}px`}" />
				</view>
			</uni-popup>
			<!-- 弹出层 -->
			<uni-popup ref="wanlSharePopup" type="bottom">
				<view class="share bg-white padding-bj">
					<view class="flex-direction justify-between align-center margin-bottom-bj">
						<text></text>
						<text class="text-black text-30">{{$getText('分享到')}} </text>
						<text class="icon text-30 text-black" @tap="handleShareClose">&#xe66b;</text>
					</view>
					<scroll-view class="share-scroll-view flex-direction" scroll-x :show-scrollbar="false"
						scroll-with-animation>
						<!-- #ifdef MP -->
						<view class="share-scroll-view-item">
							<button class="share-scroll-view-item-button" open-type="share">
								<view class="share-scroll-view-item-button-icon justify-center align-center bg-green">
									<text class="icon text-xxl text-white">&#xe608;</text>
								</view>
								<view class="margin-top-xs">
									<text class="text-sm text-black">{{$getText('分享')}} </text>
								</view>
							</button>
						</view>
						<!-- #endif -->
						<view class="share-scroll-view-item" v-for="(item, index) in providerList" :key="index"
							v-if="item">
							<button class="share-scroll-view-item-button" @tap="handleOnShare(item)">
								<view class="share-scroll-view-item-button-icon justify-center align-center"
									:class="item.background">
									<text v-if="item.id === 'weixin'" class="icon text-xxl text-white">&#xe608;</text>
									<text v-if="item.id === 'sinaweibo'"
										class="icon text-xxl text-white">&#xe6b6;</text>
									<text v-if="item.id === 'qq'" class="icon text-xxl text-white">&#xe60b;</text>
									<!-- <text v-if="item.id === 'poster'" class="icon text-xxl text-black">&#xe6c8;</text> -->
									<text v-if="item.id === 'link'" class="icon text-xxl text-black">&#xe63b;</text>
									<text v-if="item.id === 'report'" class="icon text-xxl text-black">&#xe652;</text>
								</view>
								<view class="margin-top-xs">
									<text class="text-sm text-black">{{ item.name }}</text>
								</view>
							</button>
						</view>
					</scroll-view>
					<view :style="{height: `${bottom}px`}" />
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import wanlFindVideo from '@/components/wanl-find/video';
	// #ifdef H5
	import jssdk from '@/common/libs/jssdk';
	// #endif
	let timer = null
	export default {
		name: "wanlFindPlay",
		components: {
			wanlFindVideo
		},
		props: {
			find_id: {
				type: String,
				default: ''
			},
			isComment: {
				type: String,
				default: 'N'
			},
			height: {
				type: Number,
				default: 0
			},
			width: {
				type: Number,
				default: 0
			},
			bottom: {
				type: Number,
				default: 0
			},
			safeBottom: {
				type: Number,
				default: 0
			},
			top: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				preload: 2, //当前页剩余个数换页
				clickNum: 0, //记录点击次数
				videoList: [],
				current_page: 1, //当前页码
				last_page: 1, //总页码
				status: 'loading',
				videoIndex: 0,
				oldVideoIndex: 0,
				commentData: {},
				providerList: []
			};
		},
		mounted() {
			this.loadData();
			// 分享
			uni.getProvider({
				service: 'share',
				success: e => {
					let data = [];
					// #ifdef APP-PLUS
					for (let i = 0; i < e.provider.length; i++) {
						switch (e.provider[i]) {
							case 'weixin':
								data.push({
									name: '微信好友',
									id: 'weixin',
									background: 'bg-green',
									sort: 0
								}, {
									name: '微信朋友圈',
									id: 'weixin',
									background: 'bg-green',
									type: 'WXSenceTimeline',
									sort: 1
								});
								break;
							case 'sinaweibo':
								data.push({
									name: '新浪微博',
									id: 'sinaweibo',
									background: 'bg-red',
									sort: 2
								});
								break;
							case 'qq':
								data.push({
									name: 'QQ',
									id: 'qq',
									background: 'bg-blue',
									sort: 3
								});
								break;
							default:
								break;
						}
					}
					// #endif
					data.push(
						// {
						// 	name: '生成海报',
						// 	id: 'poster',
						// 	background: 'bg-gray',
						// 	sort: 4
						// },
						{
							name: '链接',
							id: 'link',
							background: 'bg-gray',
							sort: 5
						}
					);
					if (this.isReport) {
						data.push({
							name: '举报',
							id: 'report',
							background: 'bg-gray',
							sort: 6
						});
					}
					this.providerList = data.sort((x, y) => {
						return x.sort - y.sort;
					});
				},
				fail: e => {
					uni.showModal({
						content: '获取分享通道失败',
						showCancel: false
					});
				}
			});
		},
		methods: {
			async loadData(type) {
				this.status = 'loading';
				if (type === 'update') {
					if (this.current_page >= this.last_page) {
						this.status = 'noMore';
						return false;
					} else {
						this.current_page += 1;
					}
				}
				await uni.request({
					url: '/wanlshop/find/find/getList',
					data: {
						type: 'video',
						page: this.current_page,
						find_id: this.find_id
					},
					success: res => {
						if (type === 'lower') {
							this.videoList = this.videoList.concat(res.data.data);
						} else {
							this.videoList = res.data.data;
							if (res.data.data.length > 0) {
								this.$nextTick(() => {
									this.videoPlay(this.videoIndex)
								})
							} else {
								uni.showToast({
									title: '系统还未上传任何视频！',
									icon: 'none'
								});
							}
						}
						this.current_page = res.data.current_page; //当前页码
						this.last_page = res.data.last_page; //总页码
						// 判断是否还有数据
						if (res.data.current_page === res.data.last_page || res.data.total === 0) {
							this.status = 'noMore';
						} else {
							this.status = 'more';
						}
					}
				});
			},
			async handleFollow(shop = null) {
				if (this.$store.state.user.isLogin) {
					var data = this.videoList[this.videoIndex];
					await uni.request({
						url: '/wanlshop/find/user/setFindUser',
						method: 'POST',
						data: {
							id: data.user_no,
							type: 'follow'
						},
						success: res => {
							if (shop) {
								let concern = this.$store.state.statistics.dynamic.concern;
								if (res.data.data === 0) {
									concern -= 1;
								} else {
									concern += 1;
								}
								this.$store.commit('statistics/dynamic', {
									concern: concern,
								});
							}
							data.isFollow = res.data.data;
						}
					});
				} else {
					uni.navigateTo({
						url: '/pages/user/auth/auth'
					})
				}

			},
			async handleLike() {
				if (this.$store.state.user.isLogin) {
					let data = this.videoList[this.videoIndex];
					// 加载网络
					await uni.request({
						url: '/wanlshop/find/user/setFindUser',
						method: 'POST',
						data: {
							id: data.id,
							type: 'likes'
						},
						success: res => {
							if (res.data.data === 0) {
								data.likes -= 1;
							} else {
								data.likes += 1;
							}
							data.isLike = res.data.data;
						}
					});
				} else {
				// #ifdef APP-PLUS
				
				uni.navigateTo({
					url: '/pages/user/auth/auth1'
				})
				// #endif
				
				// #ifdef H5
				
				uni.navigateTo({
					url: '/pages/user/auth/auth1'
				})
				
				// #endif
				
				// #ifdef MP-WEIXIN
				
				uni.navigateTo({
					url: '/pages/user/auth/auth'
				})
				
				// #endif
				}
			},
			async handleComment() {
				if (this.$store.state.user.isLogin) {
					let data = this.videoList[this.videoIndex];
					// 加载网络
					await uni.request({
						url: '/wanlshop/find/comments/getList',
						data: {
							id: data.id
						},
						success: res => {
							this.commentData = res.data;
							this.commentData.find_id = data.id;
							data.comments = res.data.count;
							this.$refs.wanlCommentPopup.open();
						}
					});
				} else {
					uni.navigateTo({
						url: '/pages/user/auth/auth'
					})
				}
			},
			handleComplete(e) {
				if (e.type === 'add') {
					this.handleCommentClose();
				}
				this.commentData.count = e.count;
				this.videoList[this.videoIndex].comments = e.count;
			},
			handleUser(user_no) {
				uni.navigateTo({
					url: `/pages/apps/find/user?id=${user_no}`
				})
			},
			handleShop(id) {
				uni.navigateTo({
					url: `/pages/shop/index?id=${id}`
				})
			},
			handleGoods(id) {
				uni.navigateTo({
					url: `/pages/product/goods?id=${id}`
				})
			},
			handleCommentClose() {
				this.$refs.wanlCommentPopup.close();
			},
			handleShare() {
				this.$refs.wanlSharePopup.open();
			},
			handleOnShare(e) {
				let find = this.videoList[this.videoIndex];
				let href = `${this.$store.state.common.appConfig.domain}/pages/apps/find/details/video?id=${find.id}`;
				let shareType = 0; //shareType 分享类型 0.图文 1.纯文字 2.纯图片 5.小程序
				let shareText = this.formatHtml(find.content);
				let image = find.images[0];
				let shareTitle = '短视频分享';
				if (e.id == 'poster') {
					// 海报维护中
				} else if (e.id == 'link') {
					this.copy(href);
				} else {
					// 开始分享
					let shareOPtions = {
						provider: e.id,
						scene: e.type && e.type === 'WXSenceTimeline' ? 'WXSenceTimeline' :
						'WXSceneSession', //WXSceneSession”分享到聊天界面，“WXSenceTimeline”分享到朋友圈，“WXSceneFavorite”分享到微信收藏     
						type: shareType,
						success: (e) => {
							uni.showModal({
								content: '已分享',
								showCancel: false
							})
						},
						fail: (e) => {
							uni.showModal({
								content: e.errMsg,
								showCancel: false
							})
						}
					}
					switch (shareType) {
						case 0:
							shareOPtions.summary = shareText;
							shareOPtions.imageUrl = image;
							shareOPtions.title = shareTitle;
							shareOPtions.href = href;
							break;
						case 1:
							shareOPtions.summary = shareText;
							break;
						case 2:
							shareOPtions.imageUrl = image;
							break;
						case 5:
							var pages = getCurrentPages();
							var page = (pages[pages.length - 1]).route;
							shareOPtions.imageUrl = image;
							shareOPtions.title = shareTitle;
							shareOPtions.miniProgram = {
								id: this.$store.state.common.appConfig.mp_weixin_id,
								path: page, //微信小程序ID
								webUrl: href,
								type: 0
							};
							break;
						default:
							break;
					}
					// if(shareOPtions.type === 0 && plus.os.name === 'iOS'){//如果是图文分享，且是ios平台，则压缩图片 
					// 	shareOPtions.imageUrl = await this.compress();
					// }
					if (shareOPtions.type === 1 && shareOPtions.provider === 'qq') { //如果是分享文字到qq，则必须加上href和title
						shareOPtions.href = href;
						shareOPtions.title = shareTitle;
					}
					uni.share(shareOPtions);
				}
				this.handleShareClose();
			},
			handleShareClose() {
				this.$refs.wanlSharePopup.close();
			},
			handleTag() {
				console.log('点击标签')
			},
			// 点击视频事件
			handleClicked() {
				if (timer) {
					clearTimeout(timer)
				}
				this.clickNum++
				timer = setTimeout(() => {
					if (this.clickNum >= 2) {
						this.handleLike()
					} else {
						this.videoList[this.videoIndex].play = !this.videoList[this.videoIndex].play;
					}
					this.clickNum = 0
				}, 300)
			},
			// 播放当前视频
			videoPlay(index) {
				this.videoList[index].play = !this.videoList[index].play;
			},
			handleVideoPlay() {
				if (this.videoList.length > 0)
					this.$nextTick(() => {
						this.videoList[this.videoIndex].play = true;
					})
			},
			handleVideoPause() {
				for (let item of this.videoList) {
					item.play = false
				}
			},
			// 时间打标
			pauseVideo(val) {
				// 1.0.9临时
				// if (typeof this.videoList[this.oldVideoIndex].initialTime != 'undefined') {
				// 	this.videoList[this.oldVideoIndex].initialTime = val
				// }
			},
			animationFinish(e) {
				//#ifdef APP-PLUS
				this.changeCurrent(e)
				//#endif
			},
			changeCurrent(e) {
				this.videoIndex = e.detail.current;
				this.$nextTick(() => {
					for (let item of this.videoList) {
						item.play = false
					}
					this.videoList[this.videoIndex].play = true
				})
			},
			// 格式化html
			formatHtml(content) {
				return (content.replace(/<\/?.+?>/g, "").replace(/ /g, ""));
			},
			copy(content) {
				// 复制内容，必须字符串，数字需要转换为字符串
				content = typeof content === 'string' ? content : content.toString();
				//#ifndef H5
				uni.setClipboardData({
					data: content,
					success: function() {
						uni.showToast({
							title: `复制成功 ${content}`,
							icon: 'none'
						});
					},
					fail: function() {
						uni.showToast({
							title: `复制失败`,
							icon: 'none'
						});
					}
				});
				//#endif
				// #ifdef H5
				if (!document.queryCommandSupported('copy')) { //为了兼容有些浏览器 queryCommandSupported 的判断
					msg('浏览器不支持');
				}
				let textarea = document.createElement("textarea")
				textarea.value = content
				textarea.readOnly = "readOnly"
				document.body.appendChild(textarea)
				textarea.select() // 选择对象
				textarea.setSelectionRange(0, content.length) //核心
				let result = document.execCommand("copy") // 执行浏览器复制命令
				if (result) {
					uni.showToast({
						title: `复制成功 ${content}`,
						icon: 'none'
					});
				} else {
					uni.showToast({
						title: `复制失败`,
						icon: 'none'
					});
				}
				textarea.remove()
				// #endif
			},
			oss(url, w = 120, h = 120, modenum = 2, type = '', format = 'jpg', resize = 'resize', multiple = 3) {
				let ossStc = this.$store.state.common.appUrl.oss;
				let image = '';
				let mode = ["m_lfit", "m_mfit", "m_fill", "m_fixed"];
				// 图像，自适应方向：1，渐进显示：1，转换格式：jpg，图片质量：q_90，图片锐化：50，浓缩图
				let rule = ["?x-oss-process=image", "auto-orient,1", "interlace,1", "format,jpg", "quality,q_90",
					"sharpen,50", "resize,m_fixed,w_120,h_120"
				];
				// 转换格式
				if (format == 'png') {
					rule[3] = ["format", "png"].join(",");
				}
				// 判断是否有高度
				if (w == 0) {
					rule[6] = [resize, mode[modenum], `h_${h * multiple}`].join(",");
				} else if (h == 0) {
					rule[6] = [resize, mode[modenum], `w_${w * multiple}`].join(",");
				} else {
					rule[6] = [resize, mode[modenum], `w_${w * multiple}`, `h_${h * multiple}`].join(",");
				}
				//当地址不存在
				if (url) {
					if ((/^data:image\//.test(url))) {
						image = url;
					} else if ((/^(https|https):\/\/.+/.test(url))) {
						rule.pop();
						image = url + rule.join("/");
					} else {
						image = ossStc + url + rule.join("/");
					}
				} else {
					if (type == 'transparent') {

					} else if (type == 'avatar') {
						image = ossStc + '/common/mine_def_touxiang_3x.png';
					} else {
						image = ossStc + '/common/img_default3x.png';
					}
				}
				return image;
			}
		},
		watch: {
			// 加载新的视频
			videoIndex(newVal, oldVal) {
				if (this.videoList.length - this.videoIndex - 1 <= this.preload) {
					this.loadData('update')
				}
				this.oldVideoIndex = oldVal
			}
		}
	};
</script>

<style>
	@import '@/static/style/wanlnvue.css';

	.share {
		border-top-left-radius: 26rpx;
		border-top-right-radius: 26rpx;
	}

	.share-scroll-view {
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}

	.share-scroll-view-item {
		/* #ifndef APP-PLUS */
		display: inline-flex;
		/* #endif */
		margin-right: 36rpx;
	}

	.share-scroll-view-item-button {
		background-color: rgba(0, 0, 0, 0);
		border: 0;
		padding: 0;
		flex-direction: column;
	}

	.share-scroll-view-item-button-icon {
		width: 100rpx;
		height: 100rpx;
		border-radius: 5000rpx;
	}

	/* #ifndef APP-PLUS */
	button:after {
		border: 0;
	}

	/* #endif */

	.video {
		background-color: #000000;
	}

	.left-describe {
		/* #ifndef APP-PLUS */
		display: inline;
		/* #endif */
	}

	.main-right {
		width: 98rpx;
	}

	.main-right-user {
		height: 116rpx;
		width: 98rpx;
	}

	.main-right-user-follow {
		width: 40rpx;
		height: 40rpx;
		bottom: 0;
		z-index: 999;
	}

	.main-right-image {
		width: 98rpx;
		height: 98rpx;
	}

	.main-right-img {
		width: 90rpx;
		height: 90rpx;
	}

	.goods {
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
		height: 174rpx;
	}

	.goods-item {
		/* #ifndef APP-PLUS */
		display: inline-block;
		/* #endif */
		background-color: rgba(255, 255, 255, .9);
		border-radius: 18rpx;
		margin-left: 14rpx;
		padding: 14rpx;
		height: 154rpx;
	}

	.goods-item-img {
		height: 126rpx;
		width: 126rpx;
		margin-right: 14rpx;
		border-radius: 4rpx;
	}

	.comment {
		background-color: rgba(10, 10, 10, 0.9);
		border-top: 2rpx solid rgba(255, 255, 255, 0.1);
		border-top-left-radius: 26rpx;
		border-top-right-radius: 26rpx;
	}
</style>